<template>
  <!-- 关注数 -->
  <div class="attention">
    <div class="table-head">
      <strong>全部关注</strong>
    </div>
    <el-divider></el-divider>
    <!-- 全部关注的列表 -->
    <el-table :data="tableData" style="width: 100%; talign: center">
      <el-table-column prop="avatar" label="头像" width="200px" align="center">
        <template width="90" slot-scope="scope">
          <img
            style="width: 80px; height: 80px; border: none"
            :src="scope.row.avatar"
          />
        </template>
      </el-table-column>
      <el-table-column
        prop="nickname"
        label="昵称"
        width="500px"
        align="center"
      >
      </el-table-column>
      <el-table-column prop="isAttention" label="操作" align="center">
        <template slot-scope="scope">
          <el-button size="mini" @click="unsubscribe(scope.row.id)"
            >已关注</el-button
          >
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { getIdols, delect } from "@/api/userSubscriptionApi";
export default {
  data() {
    return {
      tableData: [],
      id: sessionStorage.getItem("id"),
    };
  },
  methods: {
    changeTable(buttonVisible, index) {
      this.tableData[index].buttonVisible = !buttonVisible;
    },
    //   取消关注
    unsubscribe(index) {
      delect({ fromId: this.id, toId: index })
        .then((res) => {
          console.log("bbb", res);
          this.$message.success("取消关注成功٩( ๑╹ ꇴ╹)۶");
          this.getIdols();
        })
        .catch((error) => {
          console.log(error);
        });
    },

    // 关注列表
    getIdols() {
      getIdols(this.id)
        .then((res) => {
          this.tableData = res.data.data.list;
        })
        .catch((error) => {
          console.log(error);
        });
    },
  },
  mounted() {
    this.getIdols();
  },
};
</script>

<style>
.attention {
  width: 1200px;
  margin: 0 auto;
}
.table-head {
  margin-top: 20px;
  height: 30px;
}
</style>
